<template>
    <div style="max-width:100%; padding: 0 10px;">
        <div class="app col-md-12" style="background: #fff; padding:10px ; border-radius: 5px; margin-top:30px;">
            <el-button type="primary" @click="moduAddSenior" plain>添加</el-button>
            <el-table :data="tableData" style="width: 100%;margin-bottom: 20px; margin-top: 10px;" height='542' row-key="id"
                border :tree-props="{ children: 'children', hasChildren: true }">
                <template v-for="item in columns">
                    <template v-if="item.prop == 'modMenuIcon'">
                        <el-table-column :prop="item.prop" :label="item.label">
                            <template slot-scope="scope">
                                <i :class="scope.row.modMenuIcon"></i>
                            </template>
                        </el-table-column>
                    </template>
                    <template v-else>
                        <el-table-column :prop="item.prop" :label="item.label">
                        </el-table-column>
                    </template>
                </template>
                <el-table-column fixed="right" label="操作" width="140">
                    <template slot-scope="scope">
                        <el-button type="primary" @click="moChang(scope.row)" size="small">修改</el-button>
                        <el-button type="primary" @click="addModu(scope.row)" size="small">添加</el-button>
                        <el-button type="waring" @click="removeModu(scope.row)" size="small">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
                :page-sizes="[10, 15, 20]" :page-size="10" layout="total, sizes, prev, pager, next, jumper" :total="tota">
            </el-pagination>
            <ModuAdd :moduAddShow="moduAddShow" :urlmodu="urlmodu" :params="params" :createdUrl="createdUrl"
                @purview-modu="moduShow" @purview-newmodu="newModu">
            </ModuAdd>
            <DeleteModu :deletshow="deletshow" :deleteurl="deleteurl" @delete-event="ModuDelete" :selectList="selectList"
                @purview-delemodu="deleModu">
            </DeleteModu>
        </div>
    </div>
</template>
<script>
import { getWork } from '@/api/table'
import ModuAdd from '@/components/Form/Dialog/moduAdd.vue'
import DeleteModu from '@/components/Form/delete.vue'
export default {
    name: '',
    components: {
        ModuAdd, DeleteModu
    },
    mixins: [],
    props: {
        searchTitle: {
            type: String,
            required: true
        },
        url: {
            type: String,
            required: true
        },
        columns: {
            type: Array,
            required: true
        },
        formwidth: {
            type: String,
            required: true

        },
        popTit: {
            type: Object,
            required: true
        },
        funcDisplay: {
            type: String,
            required: true
        },
        options: {
            type: Array,
            required: true
        }
    },
    data() {
        return {
            createdUrl: '',
            selectList: [],
            // 删除模块显示隐藏
            deletshow: false,
            // 删除模块路径
            deleteurl: '/module/remove',
            params: {
                modGroup: '',
                modName: '',
                perms: '',
                modUrl: '',
                modRemark: '',
                modType: '',
                modMenuIcon: 'el-icon-s-help',
            },
            moduAddShow: false,
            tota: 0,
            // 默认每页显示的条数（可修改）
            PageSize: 10,
            // 默认显示第一条
            currentPage: 1,
            tableData: [],
            urlmodu: {
                data: '',
                datashow: true
            }
        }
    },
    computed: {

    },
    watch: {

    },
    mounted() {

    },
    methods: {
        // 删除数据后刷新数据
        deleModu(data) {
            this.tableData = data.deleModu.msg
            this.tota = data.deleModu.msg.length
            this.urlmodu.data = ''
            this.urlmodu.datashow = true
            this.selectList = []
        },
        // 添加模块后刷新数据
        newModu(data) {
            this.tableData = data.newModata.msg
            this.tota = data.newModata.msg.length
            this.urlmodu.data = ''
            this.urlmodu.datashow = true
        },
        // 删除模块
        removeModu(data) {
            this.selectList.push(data.id)
            this.deletshow = true
        },
        ModuDelete(bool) {
            this.deletshow = bool
        },
        // 取消子模块返回关闭
        moduShow(bool) {
            this.moduAddShow = bool;
            this.params = {
                modGroup: '',
                modName: '',
                perms: '',
                modUrl: '',
                modRemark: '',
                modType: '',
                modMenuIcon: 'el-icon-s-help',
                modOrder: ''
            };
            this.urlmodu.data = ''
            this.urlmodu.datashow = true
        },
        //添加最高级模块
        moduAddSenior() {
            this.createdUrl = '/module/save'
            this.params.modGroup = '0'
            this.moduAddShow = true
            this.urlmodu.datashow = true
        },
        //添加模块
        addModu(data) {
            this.createdUrl = '/module/save'
            this.params.modUrl = data.url
            this.params.modGroup = data.id
            this.moduAddShow = true
            this.urlmodu.data = ''
            this.urlmodu.datashow = true
        },
        //修改模块
        moChang(data) {
            // console.log(data);
            this.createdUrl = '/module/update'
            this.params.modGroup = data.parentId
            this.params.modId = data.id
            this.params.modMenuIcon = data.modMenuIcon
            this.params.modName = data.text
            this.urlmodu.modOrder = ''
            this.urlmodu.modRemark = ''
            this.params.modUrl = data.url
            this.params.perms = data.shiro
            this.urlmodu.data = data.url
            this.urlmodu.datashow = false
            this.moduAddShow = true
        },
        handleSizeChange(val) {
            this.PageSize = val
            // console.log(this.PageSize);
        },
        // 查询表单页数
        handleCurrentChange(val) {
            this.currentPage = val
            // console.log(this.currentPage);
        },
        // load(tree, treeNode, resolve) {
        //     setTimeout(() => {
        //         resolve([
        //             {
        //                 id: 31,
        //                 date: '2016-05-01',
        //                 name: '王小虎',
        //                 address: '上海市普陀区金沙江路 1519 弄'
        //             }, {
        //                 id: 32,
        //                 date: '2016-05-01',
        //                 name: '王小虎',
        //                 address: '上海市普陀区金沙江路 1519 弄'
        //             },
        //         ])
        //     }, 1000)
        // }
    },
    created() {
        getWork(this.url, 'get').then(res => {
            // console.log(res);
            this.tableData = res.msg
            this.tota = res.msg.length
        });
    }
};
</script>
<style>
.el-button--small {
    padding: 3px;
}
</style>